<div class="map-visualization-container">
  <div resize-event="handleResize()" ng-style="{ background: $ctrl.options.colors.background }"></div>
  <div ng-if="$ctrl.options.legend.visible && ($ctrl.legendItems.length > 0)"
    class="leaflet-bar map-custom-control" ng-class="$ctrl.options.legend.position"
  >
    <div ng-repeat="item in $ctrl.legendItems" class="d-flex align-items-center">
      <color-box color="item.color" class="m-0" style="line-height: 1px"></color-box>
      <div class="flex-fill text-{{ $ctrl.options.legend.alignText }}">{{ $ctrl.formatValue(item.limit) }}</div>
    </div>
  </div>
</div>
